import React, { Component } from "react";
import Child9 from "../components/Child9";
import Dialog from "../components/Dialog";
import Table from "../components/Table";
import Table2 from "../components/Table2";

export default class Slot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      tip: "默认提示",
      content: "",
      age: "",
      name: "",
      list: [],
      type: 1, //1表示新增   2表示删除
    };
  }

  delUserByName = (name) => {
    this.setState({
      list: this.state.list.filter((item) => item.name !== name),
    });
  };
  delUserByName2 = (name) => {
    // alert(name)
    //显示一个弹框

    this.setState({
      visible: true,
      tip: "删除的提示",
      type: 2,
      name,//删除的名称
    });
  };
  showDialog = () => {
    this.setState({
      visible: true,
      tip: "新增用户的提示",
      type: 1,
    });
  };
  confirm = () => {
    // alert(this.state.name+"年龄"+this.state.age);
    if (this.state.type === 1) {
      this.setState({
        list: [
          ...this.state.list,
          { name: this.state.name, age: this.state.age },
        ],
        visible: false,
        name: "",
        age: "",
      });
    } else {
        //删除
       this.setState({
        list:this.state.list.filter(item=>item.name !== this.state.name),
        visible:false,
        name:"",
        age:""
       })

    }
    //确定事件
   // this.cancel();
  };
  cancel = () => {
    //取消事件
    this.setState({
      visible: false,
      name: "",
      age: "",
    });
  };
  render() {
    let content =
      this.state.type === 1 ? (
        <div style={{ marginTop: "20px" }}>
          <div>
            用户名{" "}
            <input
              value={this.state.name}
              onChange={(e) => {
                this.setState({
                  name: e.target.value,
                });
              }}
            />
          </div>
          <div>
            年龄{" "}
            <input
              value={this.state.age}
              onChange={(e) => {
                this.setState({
                  age: e.target.value,
                });
              }}
            />
          </div>
        </div>
      ) : (
        "你确定要删除我吗?"
      );
    return (
      <div>
        <h3>组合(插槽)</h3>
        <Child9 left={<div>我是头部</div>} bottom={<div>我是底部</div>}>
          你好
        </Child9>
        <button
          onClick={() => {
            this.showDialog();
          }}
        >
          新增用户
        </button>

        <Dialog
          confirm={this.confirm}
          cancel={this.cancel}
          tip={this.state.tip}
          visible={this.state.visible}
          content={content}
        ></Dialog>

        <Table
          list={this.state.list}
          delUserByName={this.delUserByName}
        ></Table>

        <hr />
        <Table2
          list={this.state.list}
          delListByName={this.delUserByName2}
        ></Table2>
      </div>
    );
  }
}
